<template>
    <div class="detail">
        <div v-if="detailShow">
            <van-nav-bar :title="$t('mall.detail')" left-arrow  @click-left="_return"></van-nav-bar>
            <div class="mall-detail">
                <div class="mall-detail-header">
                    <div class="mall-detail-cover">
                        <img :src="mallDetail.web + ( mallDetail.huan && mallDetail.huan[0] )" alt="" class="mall-detail-cover-img">
                    </div>
                    <div class="mall-detail-info">
                        <div class="mall-detail-price">
                            <span class="new-price">{{ Number(mallDetail.price).toFixed(2) }} {{$t('node.jifen')}}</span>
                        </div>
                        <h3 class="mall-detail-title">{{ mallDetail.goods_title }}</h3>
                        <div class="mall-detail-tip">
                            <span>{{ $t('mall.express') }}</span>
                            <span>{{ $t('mall.sold') }}{{ mallDetail.package_sale }}{{ $t('mall.pieces') }}</span>
                        </div>
                    </div>
                </div>
                <div class="mall-detail-content">
                    <h5 class="mall-detail-content-header">{{ $t('mall.detail') }}</h5>
                    <p v-html="mallDetail.con1"></p>
                    <ul class="mall-detail-content-list">
                        <li v-for="(item,key) in mallDetail.con2" :key="key">
                            <img :src="mallDetail.web + item" alt="">
                        </li>
                    </ul>
                </div>
                <div class="mall-detail-btn">
                    <button class="btn" @click="handleBuy">{{ $t('mall.button_one') }}</button>
                </div>
            </div>
        </div>
        <div v-if="buyShow">
            <div class="mall-detail-order">
                <van-nav-bar :title="$t('mall.title_two')" left-arrow @click-left="_returns"></van-nav-bar>
                <div class="mall-detail-order-receiver-info">
                    <div class="mall-detail-order-receiver-item">
                        <label class="mall-detail-order-receiver-item__label" for="name">{{ $t('mall.receiver') }}</label>
                        <input type="text" :placeholder="$t('mall.receiver_remind')" v-model="receiver.name" id="name"
                               class="mall-detail-order-receiver-item__inp">
                    </div>
                    <div class="mall-detail-order-receiver-item">
                        <label class="mall-detail-order-receiver-item__label" for="phone">{{ $t('mall.number') }}</label>
                        <input type="text" :placeholder="$t('mall.number_remind')" v-model.trim="receiver.phone" id="phone"
                               class="mall-detail-order-receiver-item__inp">
                    </div>
                    <div class="mall-detail-order-receiver-item">
                        <label class="mall-detail-order-receiver-item__label" for="address">{{ $t('mall.address') }}</label>
                        <textarea type="text" :placeholder="$t('mall.address_remind')" v-model="receiver.address" id="address"
                                  class="mall-detail-order-receiver-item__inp textarea"></textarea>
                    </div>
                </div>
                <div class="mall-detail-order-info">
                    <div class="mall-detail-order-info-item">
                        <div class="mall-detail-order-info-item-cover">
                            <img :src="mallDetail.web + ( mallDetail.huan && mallDetail.huan[0] )" :alt="mallDetail.goods_title">
                        </div>
                        <div class="mall-detail-order-info-item-desc">
                            <h4 class="mall-detail-order-info-item-title">{{ mallDetail.goods_title }}</h4>
                            <div class="mall-detail-order-info-item-info">
                                <div class="mall-detail-order-info-item-count">{{ $t('mall.promise') }}</div>
                                <div class="mall-detail-order-info-item-tip">
                                    <p class="mall-detail-order-info-item-price">{{ Number(mallDetail.price).toFixed(2) }} {{ $t('node.jifen') }}</p>
                                    <p class="mall-detail-order-info-item-txt">x{{ mallNum }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mall-detail-order-info-count">
                        <span>{{ $t('mall.amount') }}</span>
                        <span class="mall-detail-order-info-count-operate">
                        <img :src="minus" alt="" class="minus" @click="handleMallOperate(false)">
                        <span class="count">{{ mallNum }}</span>
                        <img :src="plus" alt="" class="plus" @click="handleMallOperate(true)">
                    </span>
                    </div>
                    <div class="mall-detail-order-info-mode">
                        <span>{{ $t('mall.delivery') }}</span>
                        <span>{{ $t('mall.express') }}</span>
                    </div>
                </div>
                <div class="mall-detail-order-footer">
                    <div class="mall-detail-order-footer-price">
                        <p><span>{{ $t('mall.sum') }}：</span>{{ priceCom }} {{ $t('node.jifen') }}</p>
                    </div>
                    <button class="mall-detail-order-footer-btn" @click="handleBuyConfirm">{{ $t('mall.button_one') }}</button>
                </div>
            </div>
        </div>
        <div v-if="finishShow">
            <van-nav-bar :title="$t('mall.title_three')">
                <van-icon name="cross" slot="left" @click="showShop"></van-icon>
            </van-nav-bar>
            <div class="mall-detail-pay-done">
                <p class="mall-detail-pay-done-title">{{ finishData.goods_title }}</p>
                <div class="mall-detail-pay-done-desc">
                    <span class="price mall-detail-pay-done-desc-tip">{{ Number(finishData.price).toFixed(4) }} {{$t('node.jifen')}}</span>
                    <span class="pay-done">{{ $t('mall.state') }}</span>
                </div>
                <div class="mall-detail-pay-done-operate">
                    <span @click="showShop">{{ $t('mall.back') }}</span>
                    <span class="mall-detail-pay-done-desc-tip">{{ $t('mall.inform') }}</span>
                </div>
            </div>
        </div>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mallDetail:{},
                mallNum:1,
                detailShow:true,
                buyShow:false,
                finishShow:false,
                receiver: {
                    name: '',
                    phone: '',
                    address: ''
                },
                minus:require('../../assets/minus.png'),
                plus:require('../../assets/plus.png'),
                pwdShow:false,
                payPassword:'',
                change:0,
                rate:0,
                finishData:{}
            }
        },
        methods: {
            getDetail(){
                this.$api.get('integral/goodsDetail',{goods_id:this.child})
                    .then(res =>{
                        this.mallDetail = res.detail
                    })
            },
            handleBuy(){
                this.detailShow = false
                this.buyShow = true
            },
            _return(){
                this.$emit('_return')
            },
            _returns(){
                this.detailShow = true
                this.buyShow = false
                this.getDetail()
            },
            handleBuyConfirm(){
                if(!this.receiver.name){
                    this.$toast(this.$t('mall.receiver_remind'))
                    return false
                }
                if(!this.receiver.phone){
                    this.$toast(this.$t('mall.number_remind'))
                    return false
                }
                if(!this.receiver.address){
                    this.$toast(this.$t('mall.address_remind'))
                    return false
                }
                let param = {
                    name:this.receiver.name,
                    phone:this.receiver.phone,
                    detail:this.receiver.address
                }
                this.$api.post('integral/saveuaddress',param)
                    .then(res =>{
                        this.pwdShow = true
                    })
            },
            handleMallOperate(flag){
                if (flag) {
                    this.mallNum ++
                } else {
                    this.mallNum --
                    if (this.mallNum < 1) {
                        this.mallNum = 1
                    }
                }
            },
            submitMove(){
                if(!this.payPassword){
                    this.$toast(this.$t('pay.title'))
                    return
                }
                let param = {
                    goods_id:this.mallDetail.id,
                    goods_num: this.mallNum,
                    paypassword: this.payPassword,
                }
                this.$api.post('integral/Buygoods',param)
                    .then(res =>{
                        this.$toast(res.message)
                        this.finishData = res.detail
                        this.pwdShow = false
                        this.detailShow = this.buyShow = false
                        this.finishShow = true
                    })
            },
            forgetPwd(){
                this.$router.push({name:'safe',params:{mine:this.$route.path}})
            },
            showShop(){
                this.$emit('showShop')
            }
        },
        created() {
            this.getDetail()
        },
        mounted() {

        },
        props:{
            child:{}
        },
        computed:{
            priceCom () {
                return (Number(this.mallDetail.price) * this.mallNum).toFixed(2)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    
    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebebeb;
            border-bottom: 1px solid #ebebeb;
        }
        p{
            text-align: center;
            color: #54d8b4;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            color: #54d8b4;
            overflow visible !important
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                background:linear-gradient(180deg, #54d8b4, #26c196);
                color #fff;
                border: none;
                /*margin-left: 5%;*/
            }
        }
        .otherbox{
            width 100%
        }
    }

    .mall-detail {
        width 94%
        margin 5px auto 0
        &-header {
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            border-radius 0px
        }

        &-cover {
            &-img {
                width: 100%;
                height: 100%;
            }

            &-icon {
                position: fixed;
                top: 10px;
                left: 10px;
            }
        }

        &-info {
            padding: 10px 15px 20px;
        }

        &-price {
            display: inline-flex;
            align-items: center;

            .new-price {
                font-size: 20px;
                color: #CBAF89;
                margin-right: 5px;
            }

            .old-price {
                font-size: 12px;
                color: #898989;
                text-decoration: line-through;
            }
        }

        &-title {
            margin-top: 12px;
            font-size: 16px;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: #D8D8D8;
        }

        &-tip {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #898989;
            font-size: 12px;
        }

        &-content {
            margin-top: 10px;
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            border-radius 0px

            &-header {
                height: 36px;
                line-height: 36px;
                padding-left: 15px;
                font-size: 16px;
                color: #D8D8D8;
            }

            &-list {
                img {
                    width: 100%;
                }
            }
        }

        &-btn {
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            box-shadow:0px -4px 6px 0px rgba(0,0,0,0.5);
            padding: 5px 10px;
            box-sizing: border-box;

            button {
                height: 40px;
            }
        }

        &-order {
            &-receiver-info {
                width 94%
                margin 0 auto
            }

            &-receiver-item {
                display: flex;
                flex-flow: column nowrap;

                &__label {
                    font-size: 16px;
                    color: #D8D8D8;
                }

                &__inp {
                    height: 40px;
                    line-height: 40px;
                    border: none;
                    margin-top: 10px;
                    background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%)
                    border-radius: 4px;
                    font-size: 14px;
                    padding-left: 10px;
                    box-sizing: border-box;
                    color #CBAF89
                    &::placeholder {
                        color: #898989;
                    }

                    &.textarea {
                        height: 90px;
                    }
                }

                & + & {
                    margin-top: 20px;
                }
            }

            &-info {
                width 94%
                margin 15px auto 0
                &-item {
                    padding: 15px;
                    display: flex;
                    margin-bottom: 10px;
                    background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%)
                    border-radius 0px
                    &-cover {
                        width: 150px;
                        flex: 0 0 150px;
                        height: 95px;
                        margin-right: 8px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    &-title {
                        font-size: 14px;
                        color: #D8D8D8;
                        line-height: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    &-info {}
                    &-desc {
                        flex: 1;
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: space-between;
                    }
                    &-count {
                        font-size: 12px;
                        color: #898989;
                    }
                    &-tip {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 5px;
                    }
                    &-price {
                        font-size: 20px;
                        color: #CBAF89;
                    }
                    &-txt {
                        font-size: 12px;
                        color: #898989;
                        align-self: flex-end;
                    }
                }

                &-count, &-mode {

                    background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%)
                    height: 42px;
                    line-height: 42px;
                    padding: 0 15px;
                    color: #D8D8D8;
                    font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 5px;

                    &-operate {
                        display: inline-flex;
                        align-items: center;
                        .plus, .minus {

                        }
                        .count {
                            margin: 0 12px;
                        }
                    }
                }
            }

            &-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                padding: 10px 10px 15px 15px;
                box-sizing: border-box;
                width: 100%;
                display: flex;
                justify-content: space-between;
                background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%)
                box-shadow: 0 -2px 10px 0 rgba(0,0,0,0.3);

                &-price {
                    font-size: 14px;
                    color: #D8D8D8;

                    .approximately {
                        margin-top: 4px;
                        color: #CBAF89;
                        padding-left: 70px;
                    }
                }

                &-btn {
                    border: none;
                    background:linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%);
                    color: #000;
                    height: 40px;
                    padding: 0 28px;
                    border-radius 0px
                }
            }
        }

        &-pay-done {
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            padding: 15px;
            color: #D8D8D8;
            border-radius 0px
            width 87%
            margin 0 auto
            &-title {
                font-size: 14px;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 10px;
            }
            &-desc, &-operate {
                display: flex;
                justify-content: space-between;
                font-size: 14px;

                .price {
                    font-size: 20px;
                }
                .pay-done {
                    color: #898989;
                }

                &-tip {
                    color: #CBAF89;
                }
            }
            &-operate {
                margin-top: 20px;
            }
        }
    }
</style>